<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="ID" prop="id">
                        <el-input v-model="queryParams.id" placeholder="ID" clearable @keyup.enter.native="handleQuery" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="queryParams.mobile" placeholder="姓名" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                    <el-form-item label="姓名" prop="custName">
                        <el-input v-model="queryParams.custName" placeholder="姓名" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="星级" prop="starLevel">
                        <el-select v-model="queryParams.starLevel" placeholder="请选择星级" clearable>
                            <el-option v-for="dict in dict.type.crm_star" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注搜索" prop="remark">
                        <el-input v-model="queryParams.remark" placeholder="备注搜索" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <el-table v-loading="loading" border :data="custinfoList" @selection-change="handleSelectionChange"
            v-on:row-dblclick="handleRowDblClick" fit style="width: 100%">
            <el-table-column label="序号" type="index" align="center" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ID" align="center" prop="id" min-width="2%" />
            <el-table-column label="姓名" align="center" prop="custName" min-width="2%" />
            <el-table-column label="年龄" align="center" prop="age" min-width="2%" />
            <el-table-column label="状态" align="center" prop="status" width="80">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.crm_customerStatus" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="部门归属" align="center" prop="deptId" min-width="3%">
                <template slot-scope="scope">
                    {{ getDeptByOrgId(scope.row.deptId) }}
                </template>
            </el-table-column>

            <el-table-column label="顾问" align="center" prop="userId" min-width="3%">
                <template slot-scope="scope">
                    {{ getNameByEmpId(scope.row.userId) }}
                </template>
            </el-table-column>
            <el-table-column label="星级" align="center" prop="starLevel" min-width="3%">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.crm_star" :value="scope.row.starLevel" />
                </template>
            </el-table-column>
            <el-table-column label="备注" align="left" prop="remark" min-width="6%">
                <template slot-scope="scope">
                    <span v-html='scope.row.remark' class="span_remark2"></span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="3%">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        @click="handleRowDblClick(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>
<script>
import {
    getMyCustlist,
} from "@/api/crmsys/custinfo/custinfo";


import { childrenAlldeptTree } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "Custinfo",
    props: {
        condition: {
            type: Object,
            default: function () {
                return {}
            }
        }//查询条件
    },
    components: { Treeselect },
    watch: {
        condition: {
            handler(newVal, oldVal) {
                this.queryParams.custName = newVal.custName;
                this.queryParams.mobile = newVal.mobile;
                this.getList();
            }
        }
    },
    dicts: [
        "crm_yesno",
        "crm_sex",
        "crm_has",
        "crm_star",
        "crm_type",
        "crm_paytype",
        "crm_customerStatus",
        "crm_marriage",
        "crm_work",
        "crm_roleCategory",
        "crm_amount",
        "crm_doorstep_conclusion"
    ],
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 客户信息表格数据
            custinfoList: [],
            // 弹出层标题
            title: "",
            //是否
            whether: [{ label: "是", value: "1" }, { label: "否", value: "0" }],
            // 是否显示弹出层
            open: false,
            applyTime: null,
            updateTime: null,
            oldDistributeTime: null,
            reDistributeTime: null,
            lastRemarkTime: null,
            lastIntroduceTime: null,
            lastVisitTime: null,
            lastSignTime: null,
            lastLoanTime: null,
            is_emp: null,
            depart_leader: null,
            is_xuetu: null,
            userSet: {},
            resMapCount: {},
            op: null,
            oriDistributeFlag: null,
            off_day: null,
            dialogFormVisible: false,
            formtnotice: {
                noticeContent: null,
                noticeTime: null
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: null,
                custName: null,
                mobile: null,
                age: null,
                sex: null,
                household: null,
                officeTel: null,
                marriaged: null,
                hasHouse: null,
                houseType: null,
                hasCar: null,
                hasCredit: null,
                hasPolicy: null,
                hasSocial: null,
                socialYears: null,
                socialAmt: null,
                hasFund: null,
                fundYears: null,
                fundAmt: null,
                workNature: null,
                workPaytype: null,
                hasCompany: null,
                debtAmt: null,
                debtOverdue: null,
                loverKnowed: null,
                zhimaScore: null,
                wedebtLimit: null,
                orgId: null,
                empId: null,
                starLevel: null,
                status: null,
                remark: null,
                localPersonFlag: null,
                localPhoneFlag: null,
                amountType: null,
                hasLocalHouse: null,
                custtext: null,
                custtype: null,
                followTimeStart: null,
                followTimeEnd: null,
                loan_content: null,
                loan_condition: null,
                unfollow_day: null,
                ageLimit: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            formnoticeRules: {
                noticeContent: [{ required: true, message: '请输入备忘内容' }],
                noticeTime: [{ required: true, message: '请输入备忘内容' }]
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            // 部门归属树选项
            deptOptions: [],
        };
    },
    created() {
        if (this.condition != null && this.condition != "") {
            this.queryParams.custName = this.condition.custName;
            this.queryParams.mobile = this.condition.mobile;
            this.getList();
        }
    },
    activated() {
        const time = this.$route.query.t;
        if (time != null && time != this.uniqueId) {
            this.uniqueId = time;
            this.queryParams.pageNum = Number(this.$route.query.pageNum);
            this.getList();
        }
    },
    methods: {
        /** 查询客户信息列表 */
        getList() {
            this.loading = true;
            getMyCustlist(this.queryParams).then(response => {
                if (response.code == 200) {
                    this.custinfoList = response.data.list.rows;
                    this.total = response.data.list.total;
                    this.userSet = response.data.roleMap;
                    this.resMapCount = response.data.resMapCount;
                    this.loading = false;
                }
            });

        },
        //特殊查询字段处理
        getSpecialQuery() {
            var age = this.queryParams.ageLimit;
            if (age != null) {
                this.addDateRange(this.queryParams, age.split("-"), "age")
            }
            // 时间区间处理
            this.addDateRange2(this.queryParams, this.applyTime, "applyTime")
            this.addDateRange2(this.queryParams, this.updateTime, "updateTime")
            this.addDateRange2(this.queryParams, this.oldDistributeTime, "oldDistributeTime")
            this.addDateRange2(this.queryParams, this.reDistributeTime, "reDistributeTime")
            this.addDateRange2(this.queryParams, this.lastRemarkTime, "lastRemarkTime")
            this.addDateRange2(this.queryParams, this.lastIntroduceTime, "lastIntroduceTime")
            this.addDateRange2(this.queryParams, this.lastVisitTime, "lastVisitTime")
            this.addDateRange2(this.queryParams, this.lastSignTime, "lastSignTime")
            this.addDateRange2(this.queryParams, this.lastLoanTime, "lastLoanTime")
            this.addDateRange2(this.queryParams, this.lastLoanTime, "lastLoanTime")

            this.queryParams.params.oriDistributeFlag = this.oriDistributeFlag;
            this.queryParams.params.custOpType = "select";
            // if (this.off_day != null && this.off_day!='' ) {
            //   // 通过未跟进超过几天查询的时候，查询结果集中剔除荐介客户
            //   this.queryParams.params.starLevelNoEqual = "6";
            //   this.queryParams.params.channelNoEqual = "chlqrcode";
            // }
            this.queryParams.hasHouse = null
            this.queryParams.hasCar = null
            this.queryParams.hasPolicy = null
            this.queryParams.hasFund = null
            this.queryParams.id = null
            this.queryParams.mobile = null
            this.queryParams.custName = null

            const custtype = this.queryParams.custtype;
            if (custtype == "ID") {
                this.queryParams.id = this.queryParams.custtext
            }
            if (custtype == "mobile") {
                this.queryParams.mobile = this.queryParams.custtext

            }
            if (custtype == "custName") {
                this.queryParams.custName = this.queryParams.custtext
            }


            const loan_condition = this.queryParams.loan_condition;
            const loan_content = this.queryParams.loan_content;
            if (loan_condition == "hasHouse") {
                this.queryParams.hasHouse = loan_content
            }
            if (loan_condition == "hasCar") {
                this.queryParams.hasCar = loan_content
            }
            if (loan_condition == "hasPolicy") {
                this.queryParams.hasPolicy = loan_content
            }
            if (loan_condition == "hasFund") {
                this.queryParams.hasFund = loan_content
            }
            console.log(this.queryParams);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                custName: null,
                mobile: null,
                age: null,
                sex: null,
                city: null,
                household: null,
                officeTel: null,
                marriaged: null,
                hasHouse: null,
                houseType: null,
                houseArea: null,
                houseValue: null,
                houseTimes: null,
                houseMonthPay: null,
                houseBankName: null,
                hasCar: null,
                carType: null,
                carTimeLimit: null,
                carValue: null,
                carTimes: null,
                carMonthPay: null,
                carBankName: null,
                hasCredit: null,
                creditAmount: null,
                creditOverdue: null,
                hasPolicy: null,
                policyCompany: null,
                policyPayType: null,
                policyPayTime: null,
                hasSocial: null,
                socialYears: null,
                socialAmt: null,
                hasFund: null,
                fundYears: null,
                fundAmt: null,
                hasWork: null,
                workNature: null,
                workSalary: null,
                workPaytype: null,
                hasCompany: null,
                hasTax: null,
                debtAmt: null,
                debtOverdue: null,
                loverKnowed: null,
                zhimaScore: null,
                wedebtLimit: null,
                applyLimit: null,
                applyTime: null,
                updateTime: null,
                distributeTime: null,
                oldDistributeTime: null,
                reDistributeTime: null,
                reDistributeStatus: null,
                mediaSource: null,
                channelSource: null,
                orgId: null,
                empId: null,
                starLevel: null,
                status: null,
                preAuditLimit: null,
                preAuditChannel: null,
                remark: null,
                dpRemark: null,
                wishRemark: null,
                distributeRemark: null,
                hasRemind: null,
                lastUpdateBy: null,
                localPersonFlag: null,
                localPhoneFlag: null,
                candoFlag: null,
                oldEmpId: null,
                qrcodeid: null,
                isDelete: null,
                urlTrack: null,
                channelDesc: null,
                channelPsource: null,
                education: null,
                amountType: null,
                lastRemarkTime: null,
                repeatFlag: null,
                lockFlag: null,
                lockTime: null,
                hasLocalHouse: null,
                distributeId: null,
                passflag: null,
                md5val: null,
                encval: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");

            this.applyTime = null;
            this.updateTime = null;
            this.oldDistributeTime = null;
            this.reDistributeTime = null;
            this.lastRemarkTime = null;
            this.lastIntroduceTime = null;
            this.lastVisitTime = null;
            this.lastSignTime = null;
            this.lastLoanTime = null;

            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        handleRowDblClick(row) {
            this.$emit('receivingResults', row);
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';


::v-deep .el-table th.el-table__cell>.cell,
::v-deep .el-table th,
::v-deep .el-table .cell {
    padding: 0px !important;
    line-height: normal;
}

.cell2 {
    padding: 0;
}

::v-deep .input-with-select .el-select .el-input {
    width: 90px;
}

::v-deep .input-with-select .el-input-group__prepend {
    background-color: #fff;
}

::v-deep .el-table {
    font-size: 12px;
}

::v-deep .el-table--medium .el-table__cell {
    padding: 5px 0;
}

.notice {
    padding: 10px;
    font-size: 14px
}

.notice a {
    margin: auto 2px;
    font-weight: bold;
}
</style>